<template>
  <div class="register_container">
    <div class="register_box1">
      <div class="register_box">
        <!--        <div class="register_box2">-->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="商品" prop="goods" class="item">
            <el-input v-model="ruleForm.goods" placeholder="请输入商品" style="width: 300px">
            </el-input>
          </el-form-item>
          <el-form-item label="图片" prop="img" class="item">
            <el-input type="img" v-model="ruleForm.img" placeholder="请输入图片链接" style="width: 300px">
            </el-input>
          </el-form-item>
          <el-form-item label="品牌" prop="brand" class="item">
            <el-input v-model="ruleForm.brand" placeholder="请输入品牌" style="width: 300px;height: 5px">
            </el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price" class="item">
            <el-input v-model="ruleForm.price" placeholder="请输入价格" style="width: 300px">
            </el-input>
          </el-form-item>
          <el-form-item label="介绍" prop="introduction" class="item">
            <el-input type="textarea" v-model="ruleForm.introduction" placeholder="请输入年龄" style="width: 300px">
            </el-input>
          </el-form-item>
<!--          <el-form-item label="鞋号" prop="size" class="item">-->
<!--            <el-input v-model="ruleForm.size" style="width: 300px"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="类型" prop="size" class="type">
            <el-input v-model="ruleForm.type" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="registerForm('ruleForm')" align="center">录入</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <!--          <el-link v-on:click="look">查看用户信息</el-link>-->
            <el-button type="primary" @click="look">查看商品信息</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <!--  </div>-->
</template>

<script>
  export default {
    name: "CommodityEnter",
    data()
    {

      return {
        ruleForm: {
          goods: '',
          img: '',
          brand: '',
          price: '',
          introduction:'',
          // size: '',
          type:'',
        },
        rules: {
          goods: [
            {required: true, messintroduction: '请输入用户名', trigger: 'blur'},
            { messintroduction: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          img: [
            {required: true,   messintroduction: '请输入图片链接',trigger: 'blur'},
            { messintroduction: '长度在 3 到 6 个字符', trigger: 'blur'}
          ],
          brand: [
            {required: true, messintroduction: '请输入商标', trigger: 'change'}
          ],
          introduction: [
            {required: true, messintroduction: '请输入年龄', trigger: 'blur'}
          ],
          price: [
            {required: true, messintroduction: '请输入价格', trigger: 'blur'}
          ],
          // size: [
          //   {required: true, messintroduction: '请输入鞋号', trigger: 'blur'}
          // ] ,
          type: [
            {required: true, messintroduction: '请输入类型', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      look()
      {
        this.$router.push({path: "/commodityInformation"})
      },
      registerForm(formName)
      {
        this.$refs[formName].validate(async (valid) =>
        {
          if (valid)
          {
            const {data: res} = await this.$http.post('http://localhost:8888/goods/insert1',
              {
                goods: this.ruleForm.goods,
                img: this.ruleForm.img,
                brand: this.ruleForm.brand,
                price: this.ruleForm.price,
                introduction: this.ruleForm.introduction,
                // size: this.ruleForm.size,
                type: this.ruleForm.type
              },
              {emulateJSON: true});//进入后端
            if (res.code === 200)
            {
              alert("保存成功！")
              // this.$router.push({path: "/UserLogin"})
            }
          } else
          {
            alert("保存失败");
            return false;
          }
        });
      },
      resetForm(formName)
      {
        this.$refs[formName].resetFields();
      }
    }
  }

</script>

<style scoped>
  .item .el-form-item__label
  {
    color: dimgrey;
    font-size: 15px;

  }


  .register_box
  {
    color: dimgrey;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0px;
    position: absolute;
    width: 80%;
    height: 80%;
    left: 20%;
    top: 5%;
    /*border: solid black;*/
    /*transform: translate(-50%, -50%)*/
  }

  .register_container
  {
    /*background-color: rgba(251, 226, 152, 0.36);*/
    width: 100%;
    height: 600px;
    margin-top: -8px
  }

  .register_box1
  {
    background-color: white;
    width: 80%;
    height: 550px;
    margin-top: 10px;
    margin-left: 5%;
    float: left;
    border-radius: 20px;
    box-shadow: 1px 2px 3px 4px #cccccc;
  }

  .register_box2
  {
    float: left;
    margin-left: 20%;
    margin-top: 5%;
    width: 500px;
    /*border: solid black;*/
  }
</style>
